<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="canvas" width="500" height="350"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  // Define geometric parameters
  const centerX = 150;
  const centerY = 160;
  const radius = 90;
  const lineEndX = 480;

  // Set drawing styles
  ctx.lineWidth = 2;
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';

  // --- Draw the main shape ---

  // Draw the semi-circular arc from A to B
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0.5 * Math.PI, 1.5 * Math.PI);
  ctx.stroke();

  // Draw the top straight line AA'
  ctx.beginPath();
  ctx.moveTo(centerX, centerY - radius);
  ctx.lineTo(lineEndX, centerY - radius);
  ctx.stroke();

  // Draw the bottom straight line BB'
  ctx.beginPath();
  ctx.moveTo(centerX, centerY + radius);
  ctx.lineTo(lineEndX, centerY + radius);
  ctx.stroke();

  // --- Draw auxiliary lines and points ---

  // Draw the dashed vertical line through A, O, B
  ctx.save();
  ctx.beginPath();
  ctx.setLineDash([5, 5]);
  ctx.moveTo(centerX, centerY - radius - 20);
  ctx.lineTo(centerX, centerY + radius + 20);
  ctx.stroke();
  ctx.restore();

  // Draw the center point O
  ctx.beginPath();
  ctx.arc(centerX, centerY, 4, 0, 2 * Math.PI);
  ctx.fill();

  // --- Add labels and text ---
  
  ctx.font = '22px Times New Roman';

  // Label A (above the line)
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  ctx.fillText('A', centerX, centerY - radius - 5);

  // Label B (below the line)
  ctx.textBaseline = 'top';
  ctx.fillText('B', centerX, centerY + radius + 5);
  
  // Label A' (above the line)
  ctx.textBaseline = 'bottom';
  ctx.fillText("A'", lineEndX - 20, centerY - radius - 5);

  // Label B' (below the line)
  ctx.textBaseline = 'top';
  ctx.fillText("B'", lineEndX - 20, centerY + radius + 5);

  // Label O (to the right of the point)
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  ctx.fillText('O', centerX + 10, centerY);

  // Add the caption
  ctx.font = '24px "KaiTi", "SimSun", sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  ctx.fillText('电图 1.6.1', canvas.width / 2, canvas.height - 10);

</script>
</body>
</html>